<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-19 10:36:32
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.deliver-goods
    .title.flex.justify-center.bold.mb4 核销
    .form-content.flex
      .require.w100
          el-form(
              ref="formRef",
              :model="form",
              :rules="rules",
              label-position="left",
              label-width="100px",
              status-icon
            )
              el-form-item(label="核销金额：", prop="money")
                el-input(v-model="form.money", placeholder="请输入", type="number" clearable)
          .flex.justify-center.mt4.mb4
            el-button.btn(
              type="primary",
              size="large",
              plain,
              round,
              @click="onCancel(formRef)"
            ) 取消
            el-button.btn(
              type="primary",
              size="large",
              round,
              @click="onConfirm(formRef)"
            ) 确认
    </template>
        
        <script setup>
    import { onMounted, ref } from "vue";
    
    const props = defineProps({
      rowId: "",
    });
    onMounted(() => {
      console.log("roewefw", props.rowId);
      form.value.id = props.rowId;
    });
    
    const formRef = ref();
    const rules = ref({
      money: [
        {
          required: true,
          message: "请输入核销金额",
          trigger: "blur",
        },
      ],
    });
    const form = ref({
      id: "",
      money: "",
    });
    
    const expressCompanyList = ref([
      { name: "韵达快递", value: 1 },
      { name: "顺丰快递", value: 2 },
      { name: "京东快递", value: 3 },
    ]);
    //快递公司切换
    const expressCompanyChange = (val) => {
      form.value.express_company = val;
    };
    const emits = defineEmits(["cancel", "confirm"]);
    
    const handleAvatarSuccess = (response, uploadFile) => {
      // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    };
    
    // 取消
    const onCancel = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
      emits("cancel");
    };
    
    // 确认
    const onConfirm = (formEl) => {
      if (!formEl) return;
      formEl.validate((valid, fields) => {
        if (valid) {
          emits("confirm", form.value);
          console.log("submit!");
        } else {
          console.log("error submit!", fields);
        }
      });
      // emits("confirm", form.value);
    };
    </script>
     <style lang="stylus" scoped>
        .deliver-goods {
          .title {
            font-size: 24px;
          }
    
          .form-content {
            padding: 0px 66px;
    
            .require {
              padding: 16px 12px 0px 12px;
              border: 1px solid #E6E6E6;
            }
    
            .no-require {
              margin-left: 32px;
              padding: 16px 12px;
              border: 1px solid #E6E6E6;
            }
          }
    
          .input-width {
            width: 245px;
          }
    
          .btn {
            width: 178px;
          }
    
          .overdue {
            color: #E84026;
          }
    
          .refund {
            color: #2487E8;
          }
    
          .no-quota {
            margin-top: 200px;
          }
    
          // 上传图片相关
          .avatar-uploader .el-upload {
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
          }
    
          .avatar-uploader .el-upload:hover {
            border-color: #dcdfe6;
          }
    
          .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 152px;
            height: 100px;
            text-align: center;
            border: 1px dashed #dcdfe6;
          }
    
          .avatar-uploader .avatar {
            width: 152px;
            height: 100px;
            display: block;
          }
        }
    </style>
              